<template>
    <div class="message_box">
<!--        <div class="ball">-->
<!--            <button >+</button>-->
<!--            <div v-for="(ball,index) in balls"-->
<!--                 :key="index"-->
<!--                 :class="{show: !ball.run}"-->
<!--                 class="inner" ref="ball">-->
<!--            </div>-->
<!--        </div>-->
        <vue-drag-resize :isActive="true" :w="1200" :h="600" :z="100" :x="100" :y="100" v-on:resizing="resize" v-on:dragging="resize" v-show="isShow">
            <mainLayout></mainLayout>

        </vue-drag-resize>

    </div>
</template>

<script>
    import mainLayout from "../layout/mainLayout";
    export default {
        name: "index",
        props:['eleCard'],
        data(){
            return {
                isShow:true,
                balls: [
                    {run: false},
                    {run: false},
                    {run: false},
                    {run: false},
                    {run: false}
                ],
                ballIndex: 0,
                width: 0,
                height: 0,
                top: 0,
                left: 0,
            }
        },
        watch: {
            ballIndex(nv) {
                this.ballIndex = nv == this.balls.length ? 0 : nv;
            }
        },
        components:{
            mainLayout
        },
        mounted() {
          let close=document.getElementById('close');
            console.log(close.offsetTop,close.offsetLeft)
        },
        methods:{
            resize(newRect) {
                this.width = newRect.width;
                this.height = newRect.height;
                this.top = newRect.top;
                this.left = newRect.left;
            },
            parabola(element, options, arc, duration) {
                duration = duration || 800;
                var start = this.offset(element);
                var x = options.left - start.left,
                    y = options.top - start.top;
                var a = arc, c = 0, b = (y - a * x * x) / x;
                var date = +new Date();
                var timer = setInterval(() => {
                    var elapsed = Math.min(+new Date() - date, duration);
                    var _x = elapsed * x / duration,
                        _y = a * _x * _x + b * _x + c;
                    this.offset(element, {left: _x + start.left, top: _y + start.top});
                    if (elapsed === duration)
                        clearInterval(timer);
                }, 1000 / 60)
            },
            offset(element, coord) {
                if (typeof coord === "undefined") {
                    let _top = 0, _left = 0;
                    while (element !== null) {
                        _top += element.offsetTop;
                        _left += element.offsetLeft;
                        element = element.offsetParent;
                    }
                    return {top: _top, left: _left};
                }
                let _top = 0, _left = 0, parent = element.offsetParent;
                while (parent !== null) {
                    _top += parent.offsetTop;
                    _left += parent.offsetLeft;
                    parent = parent.offsetParent;
                }
                _left = coord.left - _left;/*要设置的相对文档的定位距离相当于是用此距离减去其父元素在文档中的定位*/
                _top = coord.top - _top;
                // css(element,{left : _left+"px", top : _top+"px"});
                element.style.left = _left + "px";
                element.style.top = _top + "px";
            },
            addCart(e) {
                console.log(e)

                var idx = this.ballIndex;
                console.log(idx)
                this.balls[idx].run = true;
                this.parabola(this.$refs.ball[idx], this.offset(this.eleCard), 0.0001,800);
                setTimeout(() => {
                    this.isShow=false;
                    this.balls[idx].run = false;
                    this.$refs.ball[idx].style.top = "";
                    this.$refs.ball[idx].style.left = "";
                }, 850);
                this.ballIndex++;
            }
        }
    }
</script>
<style>
    .vdr.active {
        background: rgb(255, 255, 255);

        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
    .message_box .vdr .vdr-stick{
        box-shadow:none;
        border-color: transparent;
    }
    .message_box .vdr .vdr-stick:nth-child(3){
        left: 8px;
        width: auto!important;
        height: 2px!important;
        top:-2px!important;
        right: 3px;

    }
    .message_box .vdr .vdr-stick:nth-child(2){
      /*background-color: #202225;*/
    }
    .message_box .vdr .vdr-stick:nth-child(4){
        /*border-left: none;*/
        /*border-bottom: none;*/
        /*top: -2px!important;*/
        /*right: -2px!important;*/
        border-color: transparent;
    }
    .message_box .vdr .vdr-stick:nth-child(7){
        left: 8px;
        width: auto!important;
        height: 2px!important;
        bottom:-2px!important;
        right: 3px;
        border-color: transparent;
    }
    .message_box .vdr .vdr-stick:nth-child(5){
         right: -2px!important;
        width: 2px!important;
        height: auto!important;
        bottom:-2px!important;
        top:7px;
    }
    .message_box .vdr .vdr-stick:nth-child(9){
        left:-1px!important;
        width: 2px!important;
        height: auto!important;
        bottom:2px!important;
        top:7px;
    }
</style>
<style scoped>
    #close{
        position: absolute;
        top:0;
        right: 10px;
    }
    .ball{
        width: 5px;
        height: 5px;
        position:absolute;
        right:15px;
        top:80px;
        z-index:200;
    }
    .ball .inner{
        position: absolute;
        top: 0;
        width:16px;
        height:16px;
        border-radius:50%;
        background-color:rgb(0,160,220);
    }

    .ball button{
        position: absolute;
        z-index: 10;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color:rgb(0,160,220);
        text-align: center;
        color:#fff;
        padding: 0;
        outline: none;
    }

    .show{
        opacity: 0;
    }
</style>
